import React, {Component} from 'react';
import {View, StyleSheet, Image, TouchableOpacity, Text} from  'react-native';
let dimension = require('Dimensions');
let beer = require('../../img/classification/beer.png');
let drink = require('../../img/classification/drink.png');
let red_wine = require('../../img/classification/red_wine.png');
let white_wine = require('../../img/classification/white_wine.png');
let wine = require('../../img/classification/wine.png');
let {width, height} = dimension.get('window');
let yyms = require('../../img/yyms.png');
let imageH = width / 4;
export default class HomeTopClassificationView extends Component {
    constructor(props) {
        super(props);
        HomeTopClassificationView._press = HomeTopClassificationView._press.bind(this);
        HomeTopClassificationView.returnImage = HomeTopClassificationView.returnImage.bind(this)
    }

    render() {
        return (
            <View style={styles.container}>
                {HomeTopClassificationView.returnImage(beer, styles.bigImageStyle)}
                <View style={styles.bottomViewStyle}>
                    {HomeTopClassificationView.returnImage(red_wine, styles.smallImageStyle)}
                    {HomeTopClassificationView.returnImage(white_wine, styles.smallImageStyle)}
                </View>
                <View style={styles.bottomViewStyle}>
                    {HomeTopClassificationView.returnImage(wine, styles.smallImageStyle)}
                    {HomeTopClassificationView.returnImage(drink, styles.smallImageStyle)}
                </View>
            </View>
        )
    }

    static _press() {
        alert("asd");
    }

    static returnImage(img, style1) {
        return (
            <TouchableOpacity onPress={HomeTopClassificationView._press}>
                <Image source={img} style={style1}/>
            </TouchableOpacity>
        )
    }

}
const styles = StyleSheet.create({
    container: {},
    bigImageStyle: {
        width: width,
        height: width / 4,
        resizeMode: 'stretch',
        marginBottom: 1
    },
    smallImageStyle: {
        width: width / 2 - 1,
        height: imageH,
        resizeMode: 'stretch',
    },
    bottomViewStyle: {
        width: width,
        height: imageH,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        marginBottom: 1
    }
});
